<template>
<div>
  <div class="banner" @click="handlerBannerClick"> 
    <img :src="bannerImg"  alt="" class="banner-img">
    <div class="banner-info">
      <div class="banner-title"> {{this.sightName}} </div>
      <div class="banner-number">
        <span class="iconfont banner-icon">&#xe674;</span>{{this.bannerImgs.length}}
      </div>
    </div>
  </div>
  <common-gallary :imgs="this.bannerImgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>
</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
  export default {
    name: 'DetailBanner',
    props: {
      sightName: String,
      bannerImg: String,
      bannerImgs: Array
    },
    components: {
      CommonGallary
    },
    data() {
      return {
          showGallary: false,
          imgs: []
      }
    },
    methods: {
      handlerBannerClick(){
        this.showGallary = true
      },
      handleGallaryClose() {
        this.showGallary = false
      }
    },

  }
</script>

<style lang="stylus" scoped>
  .banner
    position relative
    overflow hidden
    height 0
    color #fff
    padding-bottom 55%
    .banner-img
      width 100%
    .banner-info
      display flex
      position absolute 
      left 0
      right 0
      bottom 0
      line-height .6rem
      background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
      .banner-title
        flex 1
        font-size .32rem
        padding 0 .2rem 
      .banner-number
        margin-top .14rem
        padding 0 .4rem
        height .32rem
        font-size .24rem
        line-height .4rem
        height .4rem
        border-radius .2rem
        background rgba(0, 0, 0, .8)
        .banner-icon
          font-size .36rem
          margin-right 0.05rem
      
    

  
</style>